<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/style.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/index.css"/>
    <script src="${pageContext.request.contextPath}/statics/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/jQuery3.4.1.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/bootstrap.bundle.min.js"></script>
</head>

<body>

<%@include file="/common/utop.jsp" %>

<div class="wrapper zp-nav-content">
    <div class="zp-container">
        <div class="zp-main-jobnav">
            <ol class="zp-jobnav-list">
            </ol>
        </div>
        <div class="activites zp-main-activit">

            <div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="3000">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
                    <li data-slide-to="1" data-target="#myCarousel"></li>
                    <li data-slide-to="2" data-target="#myCarousel"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="${pageContext.request.contextPath}/statics/img/lubbotu (1).jpg"
                             class="d-block h-100"/>
                        <div class="carousel-caption">
                            <h5>哒哒哒哒哒哒多</h5>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="${pageContext.request.contextPath}/statics/img/lubbotu (2).jpg " alt=" "
                             class="d-block h-100"/>
                        <div class="carousel-caption">
                            <h5>啦啦啦啦啦啦</h5>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="${pageContext.request.contextPath}/statics/img/lubbotu (3).jpg " alt=" "
                             class="d-block h-100"/>
                        <div class="carousel-caption">
                            <h5>胡啦胡啦胡啦胡啦</h5>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>


    <div class="hot-job-box" id="table">
        <div class="box-title">热招职位</div>
        <h3>
            <c:if test="${sessionScope.hotJobTitle == '互联网IT'}">
                <span class="cur" onclick="javascript:activeList(this.innerHTML)">互联网IT</span>
            </c:if>
            <c:if test="${sessionScope.hotJobTitle != '互联网IT'}">
                <span class="" onclick="javascript:activeList(this.innerHTML)">互联网IT</span>
            </c:if>
            <c:if test="${sessionScope.hotJobTitle == '金融'}">
                <span class="cur" onclick="javascript:activeList(this.innerHTML)">金融</span>
            </c:if>
            <c:if test="${sessionScope.hotJobTitle != '金融'}">
                <span class="" onclick="javascript:activeList(this.innerHTML)">金融</span>
            </c:if>
            <c:if test="${sessionScope.hotJobTitle == '房地产/建筑'}">
                <span class="cur" onclick="javascript:activeList(this.innerHTML)">房地产/建筑</span>
            </c:if>
            <c:if test="${sessionScope.hotJobTitle != '房地产/建筑'}">
                <span class="" onclick="javascript:activeList(this.innerHTML)">房地产/建筑</span>
            </c:if>
        </h3>

        <ul class="cur">
            <c:forEach items="${sessionScope.hotJobList}" var="hotjoblist">
                <li>
                    <div class="sub-li">
                        <a href="javascript:gotoInfo(${hotjoblist.id})" class="job-info" >
                            <div class="sub-li-top">
                                <p class="name">${hotjoblist.name}</p>
                                <p class="salary">${hotjoblist.wage}</p>
                            </div>
                            <p class="job-text">
                                <span style="max-width: 200px">${hotjoblist.workplace}</span>
                                <span>${hotjoblist.work_experience}</span>
                                <span>${hotjoblist.ed_background}</span>
                            </p>
                        </a>
                        <div class="sub-li-bottom">
                            <a href="" class="user-info" target="_blank">
                                <p>
                                    <img src="hotel/show/${hotjoblist.remake}" alt=""/>
                                    <span class="name">${hotjoblist.e_id}</span>
                                </p>
                                <p class="sub-li-commany-info">
                                    <span class="type">${hotjoblist.cid}</span>
                                </p>
                            </a>
                        </div>
                    </div>
                </li>
            </c:forEach>


        </ul>


        <p class="common-tab-more">
            <a href="javascript:pages()" class="btn btn-outline">查看更多</a>
        </p>



    </div>
</div>

<%@include file="/common/ubottom.jsp" %>

<script>


    $(function () {
        $.ajax({
            url: "menu/getMenu",
            type: "get",
            dataType: "json",
            success: function (data) {
                var str = '';
                for (var i in data.menuInfo) {

                    if (i < data.menuInfo.length - 1) {
                        str += `<li class="zp-jobnav-item"><div class= "zp-jobnav-item-txt" >`
                            + data.menuInfo[i].title +
                            ` <span class= "fa fa-angle-right"> </span> </div><div class="zp-jobnav-pop" style="top: -`
                            + (10 + 44 * i) +
                            `px"><div class="zp-jobnav-pop-container"><div class="zp-jobnav-pop-title">`
                            + data.menuInfo[i].title + `</div><div class="zp-jobnav-pop-list">`
                        for (var x in data.menuInfo[i].child) {
                            str += `<a href="javascript:pages('`+data.menuInfo[i].child[x].title+`')" class="zp-jobnav-pop-hre">` + data.menuInfo[i].child[x].title + `</a>`

                        }
                        str += `</div></div></div></li>`
                    } else {
                        str += `<li class="zp-jobnav-item all-job"><div class= "zp-jobnav-item-txt" >
                                <a href="javascript:pages()" >`
                            + data.menuInfo[i].title +
                            `</a><span class= "fa fa-angle-right"> </span> </div>`

                    }
                }
                $(".zp-jobnav-list").append(str)
            }
        })

        activeList("互联网IT")


    })

    function activeList(data) {
        console.log(data)
        $.ajax({
            url: "/enterprise/empl/hotJobList",
            type: "post",
            dataType: "json",
            data: {pid: data},
            success: function () {
                $("#table").load("http://localhost:8080/home.html #table");
            }, error: function () {
                $("#table").load("http://localhost:8080/home.html #table");
            }
        })

    }

    $(window).scroll(function () {
        var top = $(window).scrollTop();
        if (top > 100) {
            $(".zp-search-wrapper .clearfix").addClass("zp-nav-content");
            $(".zp-search-wrapper").addClass("zp-search-fixed-center");
        } else {
            $(".zp-search-wrapper .clearfix").removeClass("zp-nav-content");
            $(".zp-search-wrapper").removeClass("zp-search-fixed-center");
        }
    });


    /**
     * 搜索框联想
     */
    var tip = $('.jobsearch');
    $('#key').keyup(function () {
        let key = $(this).val();
        if (key != "") {
            $.ajax({
                url: "searchLX",
                data: {key: key},
                type: "POST",
                dataType: "json",
                success: function (data) {
                    var str = "";
                    for (var i = 0; i < data.length; i++) {
                        str += "<li style='padding-left: 11px;' onclick='writeContent(this)'  >" + data[i].key + "</li>";
                    }
                    tip.html(str)
                    tip.css("display", "block")
                },
                error: function () {
                    console.log("请求失败了！！！")
                }
            })
        } else {
            tip.html("")
            tip.css("display", "none")
        }
    })

    function pages(data) {
        $.ajax({
            url: "/searchJob",//远程服务器端的设置
            data: {cid:data},//用户点击的页码
            type: "post",//提交类型
            success: function () {
                location.href = "/search.html"
            }
        })
    };

    function gotoInfo(id) {
        $.ajax({
            url: "/infoJob",//远程服务器端的设置
            data: {id: id},
            type: "post",//提交类型
            success: function (data) {
                window.open("/info.html")
            }
        })
    }


    $("#searchJob").click(function (){
        var key = $('#key').val()
        $.ajax({
            url: "/searchJob",//远程服务器端的设置
            data: {key: key},//用户点击的页码
            type: "post",//提交类型
            success: function () {
                location.href = "/search.html"
            }
        })
    })
</script>
</body>

</html>
